<template>
  <div class="login-page">
    <!-- login-title start -->
    <div class="login-title">蚂蚁云文档</div>
    <!-- login-title end -->
    <!-- login-form start -->
    <div class="login-form">
      <!-- login-header start -->
      <div class="login-header">
        <div class="login">
          <router-link to="login" tag="span">
            <span id="login">登录</span>
          </router-link>
        </div>
        <div class="registry">
          <span id="registry" @click="turnToRegistry">注册</span>
        </div>
      </div>
      <!-- login-header end -->
      <!--login-content start -->
      <div class="login-content">
        <div class="login-phone">
          <input type="text" v-model="phone" @focus="hideError" placeholder="手机号" maxlength="11" readonly onfocus="this.removeAttribute('readonly');"/>
        </div>
        <div class="login-password">
          <input type="password" v-model="password"  @focus="hideError" placeholder="密码" readonly onfocus="this.removeAttribute('readonly');">
          <div class="forget-password" @click="resetPwd">
            <span>| 忘记密码?</span>
          </div>
        </div>
        <div class="error-wrap">
          <div class="error-tip" v-show="errorTip"><i class="error-tip-icon"></i> <span  class="error-tip-text">{{errorText}}</span></div>
        </div>
        <div class="div-send">
          <div class="login-btn" @click="userLogin">登录</div>
        </div>
      </div>
      <!--login-content end -->
      <!--login-footer start -->
      <div class="login-footer">
        <!--<div>自动登录</div>-->
        <div class="no-account">还没有账号？<span class="to-registry" @click="turnToRegistry">立即注册</span></div>
      </div>
    </div>
    <!-- login-form end -->
  </div>
</template>
<script>
import {login} from '@/api/api'
import {encrypt, decrypt, md5Entry} from '@/utils/encrypt_decrypt'
import {params} from '@/config/config'
import Qs from 'Qs'
export default {
  name: 'login',
  data () {
    return {
      phone: '',
      password: '',
      errorText: '',
      errorTip: false // 错误提示
    }
  },
  methods: {
    /*
    * 隐藏错误提示
    * */
    hideError () {
      this.errorTip = false
    },
    /*
    * 跳转到重置密码
    * */
    resetPwd () {
      this.$router.push({name: 'registry', query: {type: 'reset'}})
    },
    /*
    * 跳转到注册页面
    * */
    turnToRegistry () {
      this.$router.push({name: 'registry', query: {type: 'regis'}})
    },
    /*
    * 获取当前路由
    * */
    getStatus (urlStr) {
      var urlStrArr = urlStr.split('/')
      return urlStrArr[urlStrArr.length - 1]
    },
    /*
    * cname
    * cpwd
    * crememberPwd
    * exdays
    * */
    setCookie (cname, cpwd, crememberPwd, exdays) {
      // 获取时间
      var exdate = new Date()
      // 保存的天数
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)
      // 字符串拼接cookie
      window.document.cookie = 'phone' + '=' + cname + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie = 'password' + '=' + cpwd + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie = 'rememberPwd' + '=' + crememberPwd + ';path=/;expires=' + exdate.toGMTString()
    },
    // 读取cookie
    getCookie () {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split('=') // 再次切割
          // 判断查找相对应的值
          if (arr2[0] === 'phone') {
            this.phone = arr2[1] // 保存到保存数据的地方
          } else if (arr2[0] === 'password') {
            this.password = arr2[1]
          } else if (arr2[0] === 'rememberPwd') {
            this.rememberPwd = true
          }
        }
        // this.rememberPwd = true;
      }
    },
    // 清除cookie
    clearCookie () {
      this.setCookie('', '', false, -1) // 修改2值都为空，天数为负1天就好了
      // this.rememberPwd = false;
    },
    /**
     * 登录
     * @returns {Promise<void>}
     */
    async userLogin () {
      const loginparams = {
        phone: this.phone,
        password: this.password,
        key: params.md5Key
      }
      const curSign = md5Entry(Qs.stringify(loginparams))
      const send = {
        phone: this.phone,
        password: this.password,
        sign: curSign.toString()
      }
      const sendData = encrypt(JSON.stringify(send))
      const curData = {
        data: sendData
      }
      const user = await login(curData)
      const file = decrypt(user.response)
      const data = JSON.parse(file)
      console.log(data)
      if (data.code === '0') {
        localStorage.setItem('uid', data.response.uid)
        localStorage.setItem('token', data.response.user_token)
        localStorage.setItem('p', this.phone)
        // 判断复选框是否被勾选 勾选则调用配置cookie方法
        if (this.rememberPwd === true) {
          // 传入账号名，密码，和保存天数3个参数
          this.setCookie(this.phone, this.password, this.rememberPwd, 7)
        } else {
          // 清空Cookie
          this.clearCookie()
        }
        // const url = window.location.href
        // const docid = this.$route.query.docid
        // const isShare = this.$route.query.isshare
        // if (url.indexOf('docid') >= 0) {
        //   // this.createCopyDoc(docid);
        //   this.$router.push({name: 'share', query: {docid: docid}})
        //   return false
        // }
        this.$router.push('index')
      } else {
        this.errorTip = true
        this.errorText = data.msg
      }
    }
  },
  mounted () {
    var currentPath = this.getStatus(this.$route.path)
    if (currentPath === 'login') {
      document.getElementById('login').style = 'border-bottom: 4px solid #3399FF'
      document.getElementById('registry').style = 'border-bottom: 0'
    } else if (currentPath === 'registry') {
      document.getElementById('registry').style = 'border-bottom: 4px solid #3399FF'
      document.getElementById('login').style = 'border-bottom: 0'
    }
  }
}
</script>
<style scoped>
  .login-form{
    padding: 0 106px;
  }
  .login-header{
    display: flex;
    justify-content: space-between;
  }
  .login-header .login, .login-header .registry{
    width: 50%;
    text-align: center;
    margin-bottom: 76px;
  }
  .login-header .login span, .login-header .registry span {
    padding-bottom: 23px;
    /*border-bottom: 4px solid #3399FF;*/
  }
  .login-content .login-phone,.login-content .login-password{
    /*height: 70px;*/
    /*line-height: 70px;*/
    /*background: #F5F5F5;*/
  }
  .login-content .login-phone input,.login-content .login-password input{
    padding-left: 15px;
    width: 100%;
    height: 70px;
    background:rgba(245,245,245,1);
    border: none;
    margin-bottom: 6px;
    outline: none;
    font-size: 24px;
  }
  .login-content .login-phone input:-webkit-autofill,.login-content .login-password input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0px 1000px #f5f5f5 inset;
    border: 1px solid #F5F5F5!important;
  }
  .login-content .login-password {
    position: relative;
  }
  .login-password .forget-password{
    display: inline-block;
    position: absolute;
    top: 18px;
    right: 23px;
    color: #9a9a9a;
    font-size: 23px;
  }
  .error-tip {
    /*margin-top: 48px;*/
  }
  .error-tip .error-tip-icon{
    display: inline-block;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: url("../../assets/images/error-tip.png") no-repeat;
    background-size: cover;
  }
  .error-tip .error-tip-text{
    color: #F74555;
    font-size: 22px;
    height: 23px;
    line-height: 23px;
  }
  .login-content .div-send{
    width: 100%;
    height: 74px;
    line-height: 74px;
    background: #3399FF;
    text-align: center;
    font-size: 29px;
    color: #fff;
    margin-top: 39px;
    border-radius: 2px;
  }
  .login-footer{
    width: 100%;
  }
  .no-account{
    float: right;
    color: #9A9A9A;
    font-size: 25px;
  }
  .no-account .to-registry{
    display: inline-block;
    margin-top: 30px;
    width: 140px;
    height: 47px;
    line-height: 47px;
    border: 1px solid #3399FF;
    border-radius: 2px;
    color: #3399FF;
    text-align: center;
  }
  .login-title {
    width: 100%;
    height: 68px;
    line-height: 68px;
    font-size: 72px;
    color: #3399FF;
    font-family: PingFangSC-Medium;
    margin: 291px 0 187px 0;
    text-align: center;
  }
  .error-wrap{
    height: 54px;
  }
</style>
